<%--
  Created by IntelliJ IDEA.
  User: s1xgod
  Date: 2022/9/25
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>userList</title>
    <link rel="shortcut icon" href="/res/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/jquery-3.6.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <%--    该页面不是用子窗口打开的，跳转到登录界面--%>
    <script>
        if (window == top) {
            location.href = "/res/user/login.jsp";
        }
    </script>
</head>

<body style="width: 100%">
<table id="userlist" lay-filter="test"></table>
<input id="changetest" type="text" value="2" style="position: absolute;display: none">

</body>


<%--一个操作单元格--%>
<script type="text/html" id="barDemo">
    <%--    {{# if ("${user}" != "" && "${user.job}" == "1"){ }}--%>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="control"><i
            class="layui-icon layui-icon-more"></i></a>
    <%--    {{# } }}--%>

</script>

<%--条件查询控件--%>
<script type="text/html" id="toolbarDemo">
    <label>用户名</label>
    <div class="layui-inline">
        <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名">
    </div>
    &nbsp;
    <label>用户状态</label>
    <div class="layui-inline">
        <input type="radio" class="userStatus" name="userStatus" value="0" title="待审核">
        <input type="radio" class="userStatus" name="userStatus" value="1" title="审核通过">
        <input type="radio" class="userStatus" name="userStatus" value="3" title="审核不通过">
    </div>
    &nbsp;
    <button class="layui-btn" id="find">查询</button>
    <button class="layui-btn" id="clear">条件重置</button>

</script>

<script>
    // 编辑信息回显
    var loginName1 = "";
    var userName1 = "";
    var id1 = "";
    // 检测该页面的ajax请求发送前，是否已登录
    <%--$(document).ajaxStart(function () {--%>
    <%--    if ("${user}" == "") {--%>
    <%--        top.location.href = "../user/login.jsp"--%>
    <%--        console.log("sss")--%>
    <%--    }--%>
    <%--});--%>
    var updateData;

    layui.use(['dropdown', 'table'], function () {
            var $ = layui.jquery;
            // 表格对象
            var table = layui.table;
            // 每行的下拉菜单对象
            var dropdown = layui.dropdown;


            //表格执行渲染
            table.render({
                elem: '#userlist' //指定原始表格元素选择器（推荐id选择器）
                // , height: 315 //容器高度
                , url: '/user/page'
                , height: 'full' // 最大高度减去其他容器已占有的高度差
                , page: true
                , toolbar: '#toolbarDemo'
                , loading: true
                , height: 'full-20'
                // 表格数据
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', width: 130, unresize: true, sort: true}
                    , {field: 'loginName', title: '登录名', width: 130, unresize: true, sort: true}
                    , {
                        field: 'job', title: '职位', hide: 0, width: 150, unresize: true, sort: true,
                        // 转义
                        templet: function (d) {
                            return (d.job == '0' ? "普通用户" : "超级管理员")
                        }
                    }
                    , {field: 'userName', title: '用户名', width: 130, unresize: true, sort: true}
                    , {
                        field: 'status', title: '状态', width: 130, unresize: true, sort: true,
                        // 转义
                        templet: function (d) {
                            return (d.status == '0' ? "待审核" : (d.status == '1' ? "审核通过" : (d.status == '3' ? "审核不通过" : "已删除")))
                        }
                    }
                    , {field: 'createDate', title: '注册时间', width: 300, unresize: true, sort: true}
                    // 操作列
                    , {fixed: 'right', title: '操作', width: 300, templet: '#barDemo'}

                ]]
                // // 查询完数据后执行
                // , done: function (res, curr, count) {
                //     //如果是异步请求数据方式，res即为你接口返回的信息。
                //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                // }
            });

            //操作单元格的事件
            table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'control') {
                    // 根据当前行用户的状态在操作单元格中显示不同的操作
                    if (obj.data.status == "0") {
                        var data1 = [{
                            title: '编辑'
                            , id: 'edit',
                        }, {
                            title: '删除'
                            , id: 'del'
                        }, {
                            title: '审核不通过'
                            , id: 'nopass'
                        }, {
                            title: '审核通过'
                            , id: 'pass'
                        }]
                    } else if (obj.data.status == "1") {
                        var data1 = [{
                            title: '编辑'
                            , id: 'edit',
                        }, {
                            title: '删除'
                            , id: 'del'
                        }]
                    } else {
                        var data1 = [{
                            title: '编辑'
                            , id: 'edit',
                        }, {
                            title: '删除'
                            , id: 'del'
                        }, {
                            title: '审核通过'
                            , id: 'pass'
                        }]
                    }
                    action(data1, this, obj.data); // data1：该下拉菜单显示的内容，this：该下拉菜单对象，obj.data：当前行数据

                }
            });

            // 每行的下拉菜单的具体操作
            function action(data1, that, data2) {
                dropdown.render({
                    elem: that
                    , show: true //外部事件触发即显示
                    , data: data1
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    , click: function (data, othis) {
                        //根据 id 做出不同操作
                        if (data.id === 'del') {
                            layer.confirm('确定删除吗？', function (index) {
                                $.post("/user/update", {
                                    "id": data2.id,
                                    "status": 2
                                }, function (returnData) {
                                    // 后台返回0表示成功
                                    if (returnData == "0") {
                                        layer.msg("已删除该用户");
                                        updateData();
                                    } else {
                                        layer.msg("服务器繁忙，审核通过失败")
                                    }
                                })
                            });
                        } else if (data.id === 'pass') {
                            layer.confirm('确定通过审核吗？', function (index) {
                                $.post("/user/update", {
                                    "id": data2.id,
                                    "status": 1
                                }, function (returnData) {
                                    // 后台返回0表示成功
                                    if (returnData == "0") {
                                        layer.msg("已通过审核");
                                        updateData();
                                        window.parent.getNewUserNum();
                                    } else {
                                        layer.msg("服务器繁忙，审核通过失败")
                                    }
                                })
                            })
                        } else if (data.id === 'nopass') {
                            layer.confirm('确定拒绝通过吗？', function (index) {
                                $.post("/user/update", {
                                    "id": data2.id,
                                    "status": 3
                                }, function (returnData) {
                                    // 后台返回0表示成功
                                    if (returnData == "0") {
                                        layer.msg("通过不审核");
                                        updateData();
                                        window.parent.getNewUserNum();
                                    } else {
                                        layer.msg("服务器繁忙，审核通过失败")
                                    }
                                })
                            })
                        } else if (data.id === 'edit') {
                            editUser(data2);
                        }
                    }

                });
            }

            function editUser(data2) {
                loginName1 = data2.loginName
                userName1 = data2.userName
                id1 = data2.id
                //登录弹窗
                layer.open({
                    title: false, //不显示标题栏
                    closeBtn: true,
                    area: ['520px', '420px'],
                    id: 'LAY_layuipro', //设定一个id，防止重复弹出
                    type: 2,
                    content: 'edit.jsp'
                });

            }

            // 点击条件查询按钮
            $("#find").click(function () {
                updateData();
            })

            // 更新用户表数据
            updateData = function updateData() {
                for (var i = 0; i < $(".userStatus").length; i++) {
                    if ($(".userStatus").eq(i).prop("checked")) {
                        var sta = $(".userStatus").eq(i).val()
                    }
                }
                table.reloadData('userlist', {
                    where: { //设定异步数据接口的额外参数，任意设
                        userName: $("#userName").val(),
                        status: sta
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }


            // 点击条件查询重置按钮
            $("#clear").click(function () {
                $("#userName").val("");
                for (var i = 0; i < $(".userStatus").length; i++) {
                    $(".userStatus").eq(i).prop("checked", false)
                }
                table.reloadData('userlist', {
                    where: { //设定异步数据接口的额外参数，任意设
                        userName: "",
                        status: ""
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })
        }
    );
</script>
</html>
